<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Linear Clock</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
        <meta name="description" content="Linear Clock" />
        <meta name="keywords" content="accordion, jquery, flexible, responsive, slide to top, tabs, UI, web design" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
     
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />
<style>
body
{

	background:#f7f7f7 url(../images/pattern.png) repeat top left;

	color:#000;

	font-family: 'Arial Narrow', Arial, sans-serif;

	font-size:13px;

	min-height:2000px;

}

a
{

	color:#000;

	text-decoration:none;

}

.clr
{

	clear:both;

}

h1
{

	padding:20px;

	font-size:28px;

	color:#333;

	font-family: 'Josefin Slab',Georgia, serif;
	font-weight:400;

    	text-align:center;

	text-shadow:1px 1px 1px #fff;

}

h1 span
{

	font-size:18px;

	color:#1693eb;

}

.more
{

	font-family: 'Arial Narrow',Georgia, serif;margin:0 auto;

	text-align:left;

	color:#ddd;
font-size:8px;
color:#444;
}

.more p
{

	display:block;

	margin:10px;

}

.more a
{

	color:#666;

	white-space: nowrap;

	font-weight:bold;

	background:#fff;

	padding:1px 6px;

	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);

	box-shadow:1px 1px 2px rgba(0,0,0,0.2);

}

.more a.current,
.more a.current:hover{
color:#fff;
background:#000;font-size:8px;
}

.more a.current2,
.more a.current2:hover{
color:#fff;background:#00f;font-size:15px;
}
.more a.current3,
.more a.current3:hover{
color:#fff;background:#f00;font-size:15px;
}

.more a:hover{

	background-color:#0f0;

	color:#fff;

}

/* Header Style */

.header
{

	line-height:24px;

	font-size:11px;

	background:#000;

	opacity:0.9;

	text-transform:uppercase;

	z-index:4;

	-moz-box-shadow:1px 0px 2px #000;

	-webkit-box-shadow:1px 0px 2px #000;

	box-shadow:1px 0px 2px #000;

}

.header a
{

	padding:0px 10px;

	letter-spacing:1px;

	color:#ddd;

	display:block;

	float:left;

}

.header a:hover
{

	color:#fff;

}

.header span.right
{

	float:right;

}

.header span.right a
{

	float:none;

	display:inline;

}

</style>

<script>
function FindDOM(ObjectID)
{
return (document.getElementById(ObjectID));
}

function setClass(ObjectID,newClass)
{
var dom = FindDOM(ObjectID);
dom.className=newClass;
}

function getClass(ObjectID,oldClass)
{
var dom = FindDOM(ObjectID);
oldClass =dom.className;
return oldClass;
}

</script>

<script type="text/javascript">

function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',1000);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

function chenille()
{
var today=new Date();
var h2=today.getHours();
var m2=today.getMinutes();
var n=today.getSeconds();
if (n==0) setClass(59,''); else setClass(n-1,'');
if (h2==0) setClass(23,''); else setClass(h2-1,'');
if (m2==0) setClass(59,''); else setClass(m2-1,'');
setClass(n,'current');
setClass(m2,'current2');
setClass(h2,'current3');
t=setTimeout('chenille()',1000);
}
</script>
  </head>
<body onload="chenille()">
<div class="container">
	<div id="txt"></div>
	<h1>Linear Clock <span>for fun</span></h1>
	<div class="more">
	<script>
		for (i=0;i<60;i++)
		{
		document.write("<a  id="+i+" >"+checkTime(i)+"</a>");
		if (i==29) document.write("<br>");
		}
	</script>
	</div>
</div>  

</body>
</html>